﻿<div class="top-row navbar navbar-dark">
    <a class="navbar-brand" href="">Stl.Samples.Blazor</a>
    <button class="navbar-toggler" @onclick="ToggleExpanded">
        <span class="navbar-toggler-icon"></span>
    </button>
</div>

<div class="@(IsExpanded ? "" : "collapse")" @onclick="ToggleExpanded">
    <ul class="nav flex-column p-3">
        @MenuItem("home", "Home", "", NavLinkMatch.All)
        @MenuItem("clock", "Server Time", "serverTime")
        @MenuItem("monitor", "Server Screen", "serverScreen")
        @MenuItem("chat", "Chat", "chat")
        @MenuItem("fork", "Composition", "composition")
    </ul>
</div>

@code {
    private bool IsExpanded { get; set; } = true;

    private void ToggleExpanded()
        => IsExpanded = !IsExpanded;

    private RenderFragment MenuItem(string icon, string title, string href, NavLinkMatch match = NavLinkMatch.Prefix) =>
        @<li class="nav-item">
            <NavLink class="nav-link" href="@href" Match="@match">
                <span class="oi oi-@icon" aria-hidden="true"></span> @title
            </NavLink>
        </li>;
}
